<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <!--以最新的IE浏览器引擎去渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--如果是双核浏览器，则使用webkit内核渲染-->
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title></title>
    <meta name="description" content=""/>
    <meta name="keyword" content=""/>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/mystyle.css" />
    <link rel="stylesheet" href="__PUBLIC__/frame/layui/css/layui.css">
    <link rel="stylesheet" href="__PUBLIC__/frame/static/css/style.css">
    <script type="text/javascript" src="__PUBLIC__/js/jquery1.12.4.js"></script>
    <script type="text/javascript" src="__PUBLIC__/frame/layui/layui.js"></script>
    <link rel="icon" href="__PUBLIC__/frame/static/image/code.png">
    <script type="text/javascript" src="__PUBLIC__/frame/echarts/echarts.js"></script>
</head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=l1x9LZBNSek5LNfrerbVEN99SGYg1a5r"></script>
<style type="text/css">
        body, html,#shequditu {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<body>

<div class="right">
    <div class="mg40">
        <div class="shequjc">
            <div class="layui-row">
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
                <div class="layui-col-md5">
                    <div class="bingtu_left">
                        <!-- <img src="__PUBLIC__/images/shequtu.png" width="120%" style="margin-left: -60px;"> -->
                        <div id="shequditu"></div> 
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="bingtu_right">
                        <h1 style="text-align: center;font-size: 30px;">基本信息统计</h1>
                        <div class="layui-row">
                            <div class="layui-col-md2">&nbsp;</div>
                            <div class="layui-col-md4">
                                <ul>
                                    <li>
                                        <div class="linejg">社区类型:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">住宅类</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">总人数:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">36000余人</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">男女比例:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">102.3:100</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">总建筑面积:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">196公顷</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">大型超市:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">2个</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">在职人员百分比:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">68.3%</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="linejg">各类车辆总和:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">12000余辆</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">各类中小型超市:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">530个</p>
                                            </div>
                                        </div>
                                    </li>
                                    
                                </ul>
                            </div>
                            <div class="layui-col-md1">&nbsp;</div>
                            <div class="layui-col-md4">
                                <ul>
                                    <li>
                                        <div class="linejg">建成时间:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">2015.06.03</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">常住人口:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">17932</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">总面积:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">300公顷</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">房屋:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">21654所</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">重点人口:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">26人</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="linejg">医院:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">5所</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="linejg">学校:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">3所</p>
                                            </div>
                                        </div>
                                    </li>  
                                    <li>
                                        <div class="linejg">组成:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">A小区,B小区,C学校</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="layui-col-md1">&nbsp;</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
        <div class="layui-row">
            <div class="layui-col-md1">
                <div>&nbsp;</div>
            </div>
            <div class="layui-col-md10">
                <div class="zhuzhuangdatu">
                    <div id="yjxf" style="height: 100%"></div>
                </div>
            </div>
            <div class="layui-col-md1">
                <div>&nbsp;</div>
            </div>
        </div>
        <div class="sqjtrs">
            <div class="layui-row">
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
                <div class="layui-col-md5">
                    <div class="jtrs_left">
                        <div id="jtrstj" style="height: 100%"></div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <div class="xbbl_right">
                        <div id="xbbl" style="height: 100%"></div>
                    </div>
                </div>
                <div class="layui-col-md1">
                    <!-- <div>&nbsp;</div> -->
                </div>
            </div>
        </div>  
        <div class="sqbaaa">
            <div class="layui-row">
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
                <div class="layui-col-md5">
                    <div class="sqclqk">
                        <div id="sqclzl" style="height: 100%"></div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <div class="xbbl_right">
                        <div id="sqzffytx" style="height: 100%"></div>
                    </div>
                </div>
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
            </div>
        </div>        
        <div class="sqdbdt">
            <div id="sqzhzayh" style="height: 100%"></div>
        </div>
    </div> 
</div>
<!-- 地图 -->
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("shequditu");
    map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
    map.enableScrollWheelZoom();

    function getBoundary(){       
        var bdary = new BMap.Boundary();
        bdary.get("通州区", function(rs){       //获取行政区域
            map.clearOverlays();        //清除地图覆盖物       
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return ;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {fillColor:"#D1E8DA",strokeWeight: 2, strokeColor: "#18AE6A"}); //建立多边形覆盖物
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }    
            map.setViewport(pointArray);    //调整视野  
            addlabel();               
        });   
    }

    setTimeout(function(){
        getBoundary();
    }, 2000);

    function addlabel() {
        var pointArray = [
          new BMap.Point(121.716076,23.703799),
          new BMap.Point(112.121885,14.570616),
          new BMap.Point(123.776573,25.695422)];
        var optsArray = [{},{},{}];
        var labelArray = [];
        var contentArray = [
          "台湾是中国的！",
          "南海是中国的！",
          "钓鱼岛是中国的！"];
        for(var i = 0;i < pointArray.length; i++) {
          optsArray[i].position = pointArray[i];
          labelArray[i] = new BMap.Label(contentArray[i],optsArray[i]);
          labelArray[i].setStyle({
            color : "red",
            fontSize : "12px",
                 height : "20px",
                 lineHeight : "20px",
                 fontFamily:"微软雅黑"
             });
          map.addOverlay(labelArray[i]);
        }     
    }
</script>
<!-- 男女比例及月均消费统计 -->
<script type="text/javascript">
    var dom = document.getElementById("yjxf");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    app.title = '多 Y 轴示例';

    var colors = ['#5793f3', '#d14a61', '#675bba'];

    option = {
        title : {
            text: 'A社区男女比例及月均消费统计',
            subtext: '',
            x:'left'
        },
        color: colors,

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        grid: {
            right: '20%'
        },
        // toolbox: {
        //     feature: {
        //         dataView: {show: true, readOnly: false},
        //         restore: {show: true},
        //         saveAsImage: {show: true}
        //     }
        // },
        legend: {
            data:['男','女','月均消费']
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                data: ['0-3岁','4-6岁','6-7岁','8-10岁','11-14岁','14-17岁','17-23岁','23-29岁','29-33岁','33-40岁','40-50岁','50-65岁']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '男',
                min: 0,
                max: 50000,
                position: 'right',
                axisLine: {
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisLabel: {
                    formatter: '{value} 人'
                }
            },
            {
                type: 'value',
                name: '女',
                min: 0,
                max: 50000,
                position: 'right',
                offset: 80,
                axisLine: {
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisLabel: {
                    formatter: '{value} 人'
                }
            },
            {
                type: 'value',
                name: '消费情况',
                min: 0,
                max: 10000,
                position: 'left',
                axisLine: {
                    lineStyle: {
                        color: colors[2]
                    }
                },
                axisLabel: {
                    formatter: '{value} 元'
                }
            }
        ],
        series: [
            {
                name:'男',
                type:'bar',
                data:[3000, 6000, 8000, 8000, 10000, 12000, 15000, 30000, 40000, 20000, 30000, 45000]
            },
            {
                name:'女',
                type:'bar',
                yAxisIndex: 1,
                data:[2986, 5763, 9213, 7495, 9840, 11963, 14630, 29746, 37624, 19630, 29764, 49302]
            },
            {
                name:'月均消费',
                type:'line',
                yAxisIndex: 2,
                data:[1000, 500, 600,500, 300, 1200, 2300, 4900, 3000, 3000, 2000, 2000]
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 家庭人数统计 -->
<script type="text/javascript">
    var dom = document.getElementById("jtrstj");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;

    option = {
        title : {
            text: 'A社区家庭人数统计',
            subtext: '',
            x:'center'
        },
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['2人', '3人', '4人', '5人', '5人以上'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'户数',
                type:'bar',
                barWidth: '60%',
                data:[660, 6618, 2412, 430, 280]
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 学历统计 -->
<script type="text/javascript">
    var dom = document.getElementById("xbbl");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: 'A社区学历统计',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['高中以下','高中','专科','本科','硕士','博士']
        },
        series : [
            {
                name: '学历',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:2357, name:'高中以下'},
                    {value:5310, name:'高中'},
                    {value:8200, name:'专科'},
                    {value:10360, name:'本科'},
                    {value:530, name:'硕士'},
                    {value:142, name:'博士'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 车辆种类统计 -->
<script type="text/javascript">
    var dom = document.getElementById("sqclzl");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: 'A社区车辆种类数量统计',
            subtext: '',
            x:'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['家用','商用','大型货车','中型货车','小型货车']
        },
        series: [
            {
                name:'用途',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:6000, name:'家用'},
                    {value:3000, name:'商用'},
                    {value:1500, name:'货运'}
                ]
            },
            {
                name:'类型',
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                    normal: {
                        // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data:[
                    {value:6000, name:'家用'},
                    {value:3000, name:'商用'},
                    {value:300, name:'大型货车'},
                    {value:700, name:'中型货车'},
                    {value:500, name:'小型货车'}
                ]
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 租房费用变化情况统计 -->
<script type="text/javascript">
    var dom = document.getElementById("sqzffytx");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: '租房费用变化',
            subtext: '',
            x:'left'
        },
        tooltip: {
            trigger: 'none',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
            },
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            data:['低档', '中档','高档']
        },
        xAxis: {
            type: 'category',
            data: ['2016.9', '2016.12', '2017.3', '2017.6', '2017.9', '2018.12', '2018.3', '2018.6', '2018.9']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name:'低档',
            data: [820, 930, 900, 934, 950, 1000, 1100,1430, 1500],
            type: 'line',
            smooth: true
        },{
            name:'中档',
            data: [2790, 3000, 3200, 3400, 3600, 3800, 4200, 4600, 5000],
            type: 'line',
            smooth: true
        },{
            name:'高档',
            data: [5000, 5200, 5400, 5500, 6500, 7800, 8300, 9000, 10000],
            type: 'line',
            smooth: true
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 社区综合治安隐患统计 -->
<script type="text/javascript">
    var dom = document.getElementById("sqzhzayh");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: '社区综合治安隐患统计',
            subtext: '',
            x:'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['消防隐患','治安隐患','外部隐患','不文明养狗','外卖快递多','交通安全','流动人口大','食品安全','失业人员不稳定','其他']
        },
        series: [
            {
                name:'安全隐患',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'消防隐患'},
                    {value:679, name:'治安隐患'},
                    {value:1548, name:'外部隐患'}
                ]
            },
            {
                name:'安全隐患',
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                    normal: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data:[
                    {value:335, name:'消防隐患'},
                    {value:310, name:'不文明养狗'},
                    {value:234, name:'外卖快递多'},
                    {value:135, name:'交通安全'},
                    {value:1048, name:'流动人口大'},
                    {value:251, name:'食品安全'},
                    {value:147, name:'失业人员不稳定'},
                    {value:102, name:'其他'}
                ]
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>




